@import "../variable.less";
@import "../func.less";
@import "../mixin.less";


.gutter-variable(@type, @size) {
  &-gutter-@{type} {
    .margin-loss-horizontal(~"--gutter-@{type}", @size);
    [class*=col] {
      .padding-horizontal(~"--gutter-@{type}", @size);
    }
  }
}

.gutter-size(@n, @name: ~"", @i: 1) when (@i =< @n) {
  &-gutter@{name}-@{i} {
    .margin-loss-horizontal(@i, @i);
    [class*=col] {
      .padding-horizontal(@i, @i);
    }
  }

  .gutter-size(@n, @name, (@i + 1));
}


.row,
.row-reverse {
  // 预设网格间距类型
  .gutter-variable(xxl, @xxl);
  .gutter-variable(xl, @xl);
  .gutter-variable(lg, @lg);
  .gutter-variable(md, @md);
  .gutter-variable(sm, @sm);
  .gutter-variable(xs, @xs);
  .gutter-variable(xxs, @xxs);
  
  .gutter-size(24);
  
  @media (max-width: @xxs-screen-min) {
    .gutter-size(24, -xxs);
  }
  
  @media (min-width: @xs-screen-min) {
    .gutter-size(24, -xs);
  }
  
  @media (min-width: @sm-screen-min) {
    .gutter-size(24, -sm);
  }
  
  @media (min-width: @md-screen-min) {
    .gutter-size(24, -md);
  }
  
  @media (min-width: @lg-screen-min) {
    .gutter-size(24, -lg);
  }
  
  @media (min-width: @xl-screen-min) {
    .gutter-size(24, -xl);
  }
  
  @media (min-width: @xxl-screen-min) {
    .gutter-size(24, -xxl);
  }
}

















